<script setup>
import {getCurrentInstance, onMounted, reactive, ref, watch} from 'vue'
import {ElMessage} from 'element-plus';
import {batchListwarehous} from '@/api/stock/batch.js'
import {warehousapply, warehoustodo} from "@/api/productsbuy/warehous.js";

const {proxy} = getCurrentInstance();  //获取当前实例
// 搜索栏数据

const validModel = ref({
  a: '',
  b: '',
  c: ''
})

//定义函数，清空数据模型的数据
const validReset = () => {
  validModel.value = {
    a: '',
    dates: []
  }
}
const data = reactive({
  form: {},
  queryParams: {

    batchId: undefined,
    warehousFlag: undefined
  }
});
// const validateC = (rule, value, callback) => {
//   if (Date.parse(value) < Date.parse(validModel.value.b)) {
//     callback(new Error('结束日期须大于开始日期'))
//   } else {
//     callback()
//   }
// }

// //搜索校验规则
// const validRules = reactive({
//   c: [
//     { validator: validateC, trigger: 'blur' },
//   ]
// })


//分页条数据模型
const pageNum = ref(1)//当前页
watch(pageNum, () => {
  loadData()
})
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  loadData();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  loadData();
}

const a = ref('')
const b = ref(null)
const c = ref(null)

// 列表数据模型
const tableData = ref([])
/** 获取列表数据  */
const loadData = async () => {
  console.log('请求数据', validModel.value.a)
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    a: validModel.value.a ? validModel.value.a : null,
    b: validModel.value.dates ? validModel.value.dates[0] : null,
    c: validModel.value.dates ? validModel.value.dates[1] : null
  }
  // console.log('a',validModel.value.a ? validModel.value.a : null)
  let result = await batchListwarehous(params);
  //渲染视图
  console.log('aaa', result.data.items)
  total.value = result.data.total;
  tableData.value = result.data.items;
}


onMounted(() => {
  loadData();
})

// 单选/多选判断
const single = ref(true);
const multiple = ref(true);

const ids = ref([]);


//定义函数，清空数据模型的数据
const reset = () => {
  editModel.value = {
    name: '',
    startTime: '',
    endTime: '',
    budget: ''
  }
}

// 新增/编辑标题
const title = ref('')

// 新增/编辑标题
const dialogVisible = ref(false)


const applyTodoList = ref([])
const applyTodotitle = ref('')
const applyTodoVisible = ref(false)

const applyCompleteList = ref([])
const applyCompletetitle = ref('')
const applyCompleteVisible = ref(false)

const {queryParams} = toRefs(data);

//请求 待入库查询接口
const applyProductTodo = async (batchId) => {
  queryParams.value.batchId = batchId;
  queryParams.value.warehousFlag = 0;
  const r = await warehoustodo(queryParams.value);
  applyTodoList.value = r.data;
  applyTodoVisible.value = true;
  applyTodotitle.value = '待入库';
  console.log(applyTodoList.value)

}

//请求已入库 查询接口
const applyProductComplete = async (batchId) => {
  queryParams.value.batchId = batchId;
  queryParams.value.warehousFlag = 1;
  const r = await warehoustodo(queryParams.value);
  applyCompleteList.value = r.data;
  applyCompleteVisible.value = true;
  applyCompletetitle.value = '已入库';
  console.log(applyCompleteList.value)
}

const onAgree = async (row) => {
  console.log("row", row);
  const pram = ref({});
  pram.value.id = row.id;
  const r = await warehousapply(pram.value);
  if (r.code == 200) {
    ElMessage.success("入库成功")
    // 获取 batchId
    const batchId = row.batchId;
    // 重新加载数据
    queryParams.value.batchId = batchId;
    queryParams.value.warehousFlag = 0;
    const reloadDataTodo = await warehoustodo(queryParams.value);
    applyTodoList.value = reloadDataTodo.data;
  } else {
    ElMessage.error(r.data)
  }
  loadData();
}


</script>
<template>
  <el-card class="page-container">
    <!-- <template #header>
      <div class="header">
        <span>入库管理</span>
      </div>
    </template> -->

    <!-- 筛选 -->
    <el-form ref="validRef" :model="validModel" :rules="validRules" inline>
      <el-form-item label="批次名称" prop="a">
        <el-input v-model="validModel.a" placeholder="请输入批次名称"/>
      </el-form-item>
      <el-form-item label="日期选择">
        <el-date-picker
            v-model="validModel.dates"
            end-placeholder="结束日期"
            range-separator="--"
            start-placeholder="开始日期"
            type="daterange"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitValid()"><span class="iconfont icon-sousuo"></span>搜索</el-button>
        <el-button type="default" @click="validReset()"> 重置</el-button>
      </el-form-item>
    </el-form>


    <!-- 按钮组 -->
    <!-- 表格 -->
    <el-table :border="true" :data="tableData" @selection-change="handleSelectionChange">
      <!--      <el-table-column align="center" fixed="left" type="selection"></el-table-column>-->
      <el-table-column align="center" label="序号" type="index" width="60">
        <!-- 序号重新计算 -->
        <template #default="scope">
          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="批次号" prop="name"></el-table-column>
      <el-table-column align="center" label="开始时间" prop="startTime"></el-table-column>
      <el-table-column align="center" label="结束时间" prop="endTime"></el-table-column>
      <!--      <el-table-column align="center" label="结束时间" prop="endTime"></el-table-column>-->
      <el-table-column align="center" label="总预算" prop="budget"></el-table-column>
      <el-table-column align="center" label="可申请预算" prop="balance"></el-table-column>
      0
      <!--      <el-table-column align="center" label="111" prop="rstate"></el-table-column>-->
      <el-table-column align="center" label="已入库申请">
        <template #default="{ row }">
          <el-button v-if="row.warehoused === 0" disabled link size="small">
            无入库信息
          </el-button>
          <el-button v-else link size="small" type="success" @click="applyProductComplete(row.id)">
            共{{ row.warehoused }}条入库信息
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="待入库申请">
        <template #default="{ row }">
          <el-button v-if="row.unwarehoused === 0" disabled link size="small">
            无待处理
          </el-button>
          <el-button v-else link size="small" type="danger" @click="applyProductTodo(row.id)">
            共{{ row.unwarehoused }}条待入库申请
          </el-button>
          <!--          <el-button v-if="row.checkFlag === 1" link size="small" type="danger" @click="applyProductTodo(row.id)">-->
          <!--            待入库申请-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请状态">
        <template #default="{ row }">
          <div v-if="row.state === 1" :style="{ color: 'green',fontSize: '12px' }">
            可申请
          </div>
          <div v-else :style="{ fontSize: '12px' }">
            不可申请
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
                   :total="total" background layout="jumper, total, sizes, prev, pager, next"
                   style="margin-top: 20px; justify-content: flex-end"
                   @size-change="onSizeChange" @current-change="onCurrentChange"/>
    <!-- 分页 -->


  </el-card>


  <!-- 未入库 -->
  <el-dialog v-model="applyTodoVisible" :title="applyTodotitle" width="80%">
    <el-table :border="true" :data="applyTodoList" @selection-change="onSelectionChange">
      <el-table-column :show-overflow-tooltip="true" align="center" label="序号">
        <!-- 序号重新计算 -->
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :show-overflow-tooltip="true" align="center" label="申请批次" prop="batchName"/> -->
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请物品" prop="productsName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请数量" prop="amount"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请金额" prop="price"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请人员" prop="applicantName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请原因" prop="reason"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请时间" prop="createTime"/>

      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template #default="{ row }">
          <el-tooltip content="入库" placement="top">
            <el-button icon="CircleCheck" link type="primary" @click="onAgree(row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyTodoVisible = false">取消</el-button>
        </span>
    </template>
  </el-dialog>

  <!-- 已入库详情 -->
  <el-dialog v-model="applyCompleteVisible" :title="applyCompletetitle" width="80%">
    <el-table :border="true" :data="applyCompleteList" @selection-change="onSelectionChange">
      <el-table-column :show-overflow-tooltip="true" align="center" label="序号">
        <!-- 序号重新计算 -->
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="序号" prop="id"/> -->
      <!-- <el-table-column :show-overflow-tooltip="true" align="center" label="申请批次" prop="batchName"/> -->
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请物品" prop="productsName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请数量" prop="amount"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请金额" prop="price"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请人员" prop="applicantName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请原因" prop="reason"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请时间" prop="createTime"/>
      <!--      <el-table-column :show-overflow-tooltip="true" align="center" label="审批时间" prop="approvalTime"/>-->
      <el-table-column :show-overflow-tooltip="true" align="center" label="入库时间" prop="warehousTime"/>
      <!--      <el-table-column :show-overflow-tooltip="true" align="center" label="申请状态">-->
      <!--        <template #default="{ row }">-->
      <!--          <span v-if="row.flag === 1">已通过</span>-->
      <!--          <span v-else>已驳回</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">-->
      <!--        <template #default="{ row }">-->
      <!--          <el-button v-if="row.flag === 1" link type="primary" @click="onDisagree(row)">驳回</el-button>-->
      <!--          <el-button v-if="row.flag === 0" link type="primary" @click="onAgree(row)">通过</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <!-- 表格 -->
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyCompleteVisible = false">取消</el-button>
        </span>
    </template>
  </el-dialog>

</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mb8 {
    margin-bottom: 8px;
  }
}
</style>